import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
Input.propTypes = {
    label: PropTypes.string,
    placeholder: PropTypes.string,
    onChange: PropTypes.func,
    onClick: PropTypes.func,
    footer: PropTypes.node,
    isHasArrow: PropTypes.bool,
    disabled: PropTypes.bool,
    value: PropTypes.string,
    type: PropTypes.string,
    icon: PropTypes.string,
    className: PropTypes.object
};
export default function Input(props) {
    const [value, setValue] = useState('');
    useEffect(() => {
        setValue(props.value);
    }, [props.value]);
    return (
        <div
            className={`weui-cell weui-cell_active ${props.isHasArrow ? 'weui-cell_access' : ''}`}
            onClick={() => _.get(props, ['onClick']) && props.onClick()}
        >
            <div className="weui-cell__hd"><label className={`weui-label ${props.icon ? 'iconfont ' + props.icon : ''}`}>{props.label}</label></div>
            <div className={`weui-cell__bd`}>
                <input
                    className={`weui-input ${props.className && props.className.bdName ? props.className.bdName : ''}`}
                    placeholder={props.placeholder}
                    defaultValue={value}
                    onChange={(e) => props.onChange(e)}
                    disabled={props.disabled || false}
                    type={props.type || 'text'}
                    style={{ opacity: 1 }}
                />
            </div>
            {_.get(props, ['footer'])}
            {props.isHasArrow && <div className="weui-cell__ft"></div>}
        </div>
    );
}
